<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>仪表盘s</title>
    <style>
        .circle {
            border-radius: 50%;
            text-align: center;
            font-weight: bold;
            color: darkred;
        }

        .tab-td-border-right {
            border-right: 1px solid #EEE;
        }
    </style>
</head>
<body>
<div class="content-wrapper">
    <div class="row">
        <div class="col-sm-4">
            <!-- START widget-->
            <div class="panel widget bg-primary">
                <div class="row row-table">
                    <div class="col-xs-4 text-center bg-primary-dark pv-lg">
                        <em class="icon-call-in fa-3x"></em>
                    </div>
                    <div class="col-xs-8 pv-lg">
                        <div class="h2 mt0">86%</div>
                        <div class="text-uppercase">12366当日接通率</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <!-- START widget-->
            <div class="panel widget bg-purple">
                <div class="row row-table" >
                    <div class="col-xs-4 text-center bg-purple-dark pv-lg">
                        <em class="icon-globe fa-3x"></em>
                    </div>
                    <div class="col-xs-8 pv-lg">
                        <div class="h2 mt0">正常
                        </div>
                        <div class="text-uppercase">网上办税厅当前状态</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <!-- START widget-->
            <div class="panel widget bg-green">
                <div class="row row-table">
                    <div class="col-xs-4 text-center bg-green-dark pv-lg">
                        <em class="icon-emoticon-smile fa-3x"></em>
                    </div>
                    <div class="col-xs-8 pv-lg">
                        <div class="h2 mt0">92%</div>
                        <div class="text-uppercase">实体办税厅满意度</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-7">
            <div class="panel panel-default">
                <div class="panel-heading">江苏省地税渠道分析综合指标</div>
                <div class="panel-body">
                    <div id="echarts-map" style="height: 360px;"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="panel panel-default">
                <div class="panel-heading">
                    12366高频热词
                </div>
                <div class="panel-body">
                    <div id="echarts-pie" style="height: 360px;"></div>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">

    require.config({
        paths: {
            echarts: '${ctx}/assets/echarts/build/dist'
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/scatter',
                'echarts/chart/pie',
                'echarts/chart/map',
                'echarts/chart/tree',
                'echarts/chart/funnel',
                'echarts/chart/wordCloud'

            ],
            function (ec) {
                //江苏省税务业务办理事项统计
                var myChart = ec.init(document.getElementById('echarts-map'));
                var mapOption = {
                    tooltip: {
                        trigger: 'item'
                    },
                    dataRange: {
                        orient: 'vertical',
                        min: 0,
                        max: 10000,
                        color: ['orangered', 'yellow', 'lightskyblue'],
                        text: ['高', '低'],
                        splitNumber: 0
                    },
                    series: [
                        {
                            name: '江苏省各市税务业务综合指标',
                            type: 'map',
                            mapType: '江苏',
                            selectedMode: 'single',
                            itemStyle: {
                                normal: {label: {show: true}},
                                emphasis: {label: {show: true}}
                            },
                            data: [
                                {name: '南京市', value: 9999},
                                {name: '镇江市', value: 1670},
                                {name: '常州市', value: 2102},
                                {name: '无锡市', value: 5000},
                                {name: '苏州市', value: 7000},
                                {name: '南通市', value: 1600},
                                {name: '泰州市', value: 1300},
                                {name: '扬州市', value: 5000},
                                {name: '盐城市', value: 2102},
                                {name: '淮安市', value: 1100},
                                {name: '宿迁市', value: 2300},
                                {name: '徐州市', value: 4000},
                                {name: '连云港市', value: 3000}
                            ]
                        }
                    ],
                    animation: true
                };
                myChart.setOption(mapOption, true);


                var gpc_chart = ec.init(document.getElementById('echarts-pie'));
                var gpc_option = {
//                    title : {
//                        text: '南丁格尔玫瑰图',
//                        subtext: '纯属虚构',
//                        x:'center'
//                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
//                    legend: {
//                        x : 'center',
//                        y : 'bottom',
//                        data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
//                    },
                    toolbox: {
                        show: true,
                        x: 'right',
                        y: 'bottom',
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    series: [
                        {
                            name: '面积模式',
                            type: 'pie',
                            radius: [30, 110],
//                            center : ['75%', 200],
                            roseType: 'area',
                            x: '40%',               // for funnel
                            max: 40,                // for funnel
                            sort: 'ascending',     // for funnel
                            data: [
                                {value: 5, name: '创客'},
                                {value: 15, name: '普惠金融'},
                                {value: 25, name: '养老制度改革'},
                                {value: 20, name: '收入分配改革'},
                                {value: 35, name: '全面二胎'},
                                {value: 30, name: '自贸区'},
                                {value: 40, name: '营改增'}
                            ]
                        }
                    ]
                };

                gpc_chart.setOption(gpc_option, true);

            })


</script>
</body>
</html>
